<template>
    <div ref="chart" class="chart"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    categories: Array,
    dataSeries: Array
});

const chart = ref(null);

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart.value) {
        echarts.dispose(chart.value);
    }
});

const initChart = () => {
    if (!props.categories || !props.dataSeries) {
        console.error('数据未正确传递：', { categories: props.categories, dataSeries: props.dataSeries });
        return;
    }

    const chartDom = chart.value;
    const chartInstance = echarts.init(chartDom);

    const maxDataValue = Math.max(...props.dataSeries); // 计算数据的最大值

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.categories,
            axisLabel: {
                color: 'white',
                fontSize: 15,
                fontFamily: ''
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.5)'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {
                color: 'white',
                fontSize: 15,
                fontFamily: '',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.5)'
                }
            }
        },
        series: [
            {
                name: '背景柱状图',
                type: 'bar',
                data: props.categories.map(() => maxDataValue),
                barWidth: 20,
                itemStyle: {
                    color: 'rgba(204, 204, 204, 0.2)'
                },
                z: 0
            },
            {
                name: '数据',
                type: 'line',
                data: props.dataSeries,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    borderColor: 'red',
                    borderWidth: 0.8,
                    color: '#576f7c'
                },
                lineStyle: {
                    width: 1.5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // x0, y0, x1, y1 控制渐变方向，这里是垂直渐变
                        [
                            { offset: 0, color: 'red' }, // 开始颜色为黄色
                            { offset: 1, color: 'yellow' } // 结束颜色为红色
                        ]
                    )
                }
            }
        ]
    };

    chartInstance.setOption(option);

    // 监听窗口大小变化，自动调整图表大小
    window.addEventListener('resize', () => {
        chartInstance.resize();
    });

    // 清理事件监听器
    onBeforeUnmount(() => {
        window.removeEventListener('resize', () => {
            chartInstance.resize();
        });
    });
};

// 当 props 数据发生变化时，重新初始化图表
watch([() => props.categories, () => props.dataSeries], ([newCategories, newDataSeries]) => {
    if (newCategories && newDataSeries) {
        initChart();
    }
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>